<template>
  <view class="">
    <u-popup :customStyle="{background: 'transparent'}" :safeAreaInsetBottom="false" :show="isShow" mode="center"
             @close="close">
      <view class="wrap">
        <image class="close" mode="" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/close.png"
               @click="close"></image>
        <view class="content flex">
          <image
              :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${result === 'success' ? 'suc' : 'fail'}.png`"
              class="img"
              mode=""></image>
          <view class="tips" v-html="content">
          </view>
          <image :style="{marginTop: result === 'success' ? '111rpx' : '65rpx'}" class="btn"
                 src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/qr.png"
                 @click="submit"></image>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
      // result: 'fail',
      // content: ''
    }
  },
  props: {
    result: {
      type: String,
      default: 'fail'
    },
    content: {
      type: String,
      default: ''
    }
  },
  methods: {
    show() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
    },
    submit() {
      this.close();
      this.$emit('next', {
        result: this.result,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 670rpx;
  padding: 30rpx 0 40rpx;
  box-sizing: border-box;
  background: url('https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-h.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .close {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    top: 0;
    right: 0;
  }
}

.content {
  width: 550rpx;
  background: url('https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-b.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 60rpx 40rpx 90rpx;
  flex-direction: column;

  .img {
    width: 140rpx;
    height: 140rpx;
    margin-bottom: 50rpx;
  }

  .tips {
    font-size: 45rpx;
    font-weight: 400;
    letter-spacing: 0pt;
    line-height: 65.16rpx;
    color: rgba(0, 0, 0, 1);
    text-align: center;
  }

  .fail {
    font-size: 36rpx;
    font-weight: 400;
    line-height: 52.13rpx;
    color: rgba(0, 0, 0, 1);
  }

  .btn {
    width: 380rpx;
    height: 90rpx;
  }
}

.content1 {
  background-image: url('https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-b1.png');
}
</style>
